<template>
  <div class="pet-products">
    <!-- 导航链接 -->
    <NavigationBar />
    <h1>宠物用品</h1>
    <div class="product-list">
      <div v-for="product in products" :key="product.id" class="product-item">
        <img :src="product.image" alt="产品图片" class="product-image" />
        <h2>{{ product.name }}</h2>
        <p>{{ product.description }}</p>
        <p class="price">￥{{ product.price }}</p>
        <button @click="addToCart(product)">加入购物车</button>
      </div>
    </div>
    <!-- 底部信息 -->
    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue';
import NavigationBar from '@/components/NavigationBar.vue';

export default {
  name: 'PetProducts',
  components: {
    NavigationBar,
    Footer
  },
  data() {
    return {
      products: [
        // 示例产品数据
        { id: 1, name: '猫砂', description: '优质猫砂，吸水性强', price: 50, image: 'path/to/image1.jpg' },
        { id: 2, name: '狗粮', description: '营养均衡的狗粮', price: 80, image: 'path/to/image2.jpg' },
        // 更多产品...
      ]
    };
  },
  methods: {
    addToCart(product) {
      // 添加产品到购物车的逻辑
      console.log('添加到购物车:', product.name);
    }
  }
};
</script>

<style scoped>
.pet-products {
  text-align: center;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.product-item {
  margin: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.price {
  color: red;
}
</style>